<template>
   <div class="section_inner">
			<div class="index_hd">
			<div class="index_tit">
				<h2 class="icon_txt">
					排行榜
				</h2>
			</div>
			</div>
			<a href="#" class="index_more">
				更多
				<i class="icon_index_arrow"></i>
			</a>
			<ul class="toplist">
				<li class="toplist_item item1">
					<div class="toplist_box">
						<div class="toplist_bg "></div>
						<i class="mod_cover_icon_play"></i>
						<i class="toplist_line"></i>
						<h3 class="toplist_hd">
							<a href="#">
								热歌
							</a>
						</h3>
						<ul class="toplist_songlist">
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										圣诞星（feat.杨瑞代）
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">周杰伦</a>
								</div>
							</li>
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										句号
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">G·E·M 邓紫棋</a>
								</div>
							</li>
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										西楼儿女
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">岳云鹏</a>
								</div>
							</li>
						</ul>
					</div>
				</li>
				<li class="toplist_item item2">
					<div class="toplist_box">
						<div class="toplist_bg "></div>
						<i class="mod_cover_icon_play"></i>
						<i class="toplist_line"></i>
						<h3 class="toplist_hd">
							<a href="#" >
								热歌
							</a>
						</h3>
						<ul class="toplist_songlist">
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										圣诞星（feat.杨瑞代）
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">周杰伦</a>
								</div>
							</li>
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										句号
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">G·E·M 邓紫棋</a>
								</div>
							</li>
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										西楼儿女
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">岳云鹏</a>
								</div>
							</li>
						</ul>
					</div>
				</li>
				<li class="toplist_item item3">
					<div class="toplist_box">
						<div class="toplist_bg "></div>
						<i class="mod_cover_icon_play"></i>
						<i class="toplist_line"></i>
						<h3 class="toplist_hd">
							<a href="#" >
								热歌
							</a>
						</h3>
						<ul class="toplist_songlist">
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										圣诞星（feat.杨瑞代）
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">周杰伦</a>
								</div>
							</li>
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										句号
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">G·E·M 邓紫棋</a>
								</div>
							</li>
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										西楼儿女
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">岳云鹏</a>
								</div>
							</li>
						</ul>
					</div>
				</li>
				<li class="toplist_item item4">
					<div class="toplist_box">
						<div class="toplist_bg "></div>
						<i class="mod_cover_icon_play"></i>
						<i class="toplist_line"></i>
						<h3 class="toplist_hd">
							<a href="#" >
								热歌
							</a>
						</h3>
						<ul class="toplist_songlist">
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										圣诞星（feat.杨瑞代）
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">周杰伦</a>
								</div>
							</li>
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										句号
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">G·E·M 邓紫棋</a>
								</div>
							</li>
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										西楼儿女
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">岳云鹏</a>
								</div>
							</li>
						</ul>
					</div>
				</li>
				<li class="toplist_item item5">
					<div class="toplist_box">
						<div class="toplist_bg "></div>
						<i class="mod_cover_icon_play"></i>
						<i class="toplist_line"></i>
						<h3 class="toplist_hd">
							<a href="#">
								热歌
							</a>
						</h3>
						<ul class="toplist_songlist">
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										圣诞星（feat.杨瑞代）
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">周杰伦</a>
								</div>
							</li>
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										句号
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">G·E·M 邓紫棋</a>
								</div>
							</li>
							<li class="toplist_song">
								<div class="toplist_number">
									1
								</div>
								<div class="toplist_songname">
									<a href="#">
										西楼儿女
									</a>
								</div>
								<div class="toplist_artist">
									<a href="#">岳云鹏</a>
								</div>
							</li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
  </template>
  
  <script>
 
  export default {
    name: 'PaiHangBang',
    components: {
    
    }
  }
  </script>
 <style scoped>
 .toplist{
     white-space: nowrap;
 }
 .toplist_item{
     width: 20%;
     
     display: inline-block;
     list-style: none;
 }
 .index_tit{
     margin: 0 auto;
     width: 196px;
     height: 40px;
     display: block;
     text-align: center;
     background-image: url('@/assets/words_tit.png');
     background-position: 0 -200px;

 }
 .index_more{
     text-decoration: none;
     color: #000000;
     top:56px;
     position: absolute;
     right: 0;
 }
 .index_hd{
     padding-top: 4.16667%;
     position: relative;
     padding-bottom: 2%;
     
 }
 .toplist_bg{
     position:absolute;
     background-image: url('@/assets/paihangbang_bg/bg.webp');
     height: 567px;
     top:0;
     left: 0;
     right: 0;
     opacity: 1;
     z-index: -1;
 }
 
 .section_inner{
     margin: 0 auto;
     width: 1200px;
     position: relative;
     font-family: poppin,Tahoma,Arial,微软雅黑,sans-serif;
 }
 .toplist_box{
     position: relative;
     height: 500px;
     overflow: hidden;
     margin-right: 20px;
 }
 a{
     color: white;
 }
 
 .toplist_item.item1 .toplist_bg{
     background-position: 0 0;
 }
 .toplist_item.item2 .toplist_bg{
     background-position: -224px 0;
 }
 .toplist_item.item3 .toplist_bg{
     background-position: -448px 0;
 }
 .toplist_item.item4 .toplist_bg{
     background-position: -672px 0;
 }
 .toplist_item.item5 .toplist_bg{
     background-position: -896px 0;
 }
 .toplist_songlist{
     position:absolute;
     top:188px;
     left: 20px;
     list-style: none;
     padding:0;
     
 }
 .toplist_hd{
     width: 200px;
     position: absolute;
     text-align: center;
     top:50px;
     left: 50%;
     margin-left: -100px;
     
 }

 .toplist_hd a{
     cursor: pointer;
     text-decoration: none;
     font-size: 26px;
     font-weight: 400;
 }
 .toplist_song{
     margin-bottom: 27px;
 }
 .toplist_number{
     color: white;
     display: inline-block;
 }
 .toplist_songname{
     
     display: inline-block;
 }
 .toplist_songname a{
     font-size: 14px;
     text-decoration: none;
 }
 .toplist_artist a{
     font-size: 14px;
     text-decoration: none;
 }
 .icon_index_arrow{
     width: 7px;
     height: 12px;
     background-image: url('@/assets/paihangbang_bg/right-arrow.png');
 }
 .index_tit .icon_txt{
     font:0/0 a;
 }
 .toplist_line{
       position: absolute;
       left: 50%;
       top: 148px;
       margin-left: -18px;
       width: 36px;
       height: 2px;
       background: #fff;
 }
 .toplist_item:hover .toplist_line{
     display: none;
 }
 .toplist_item:hover .mod_cover_icon_play{
     background-image: url('@/assets/paihangbang_bg/play.png');
     transform: scale(1.06);
       transition: transform .75s cubic-bezier(0,1,.75,1);
     opacity: 1;
 }
 .mod_cover_icon_play{
       background-image: url('@/assets/paihangbang_bg/play.png');
       background-size: 72%;
       background-repeat: no-repeat;
       background-position: 50%;
       position: absolute;
       left: 50%;
       top: 149px;
       margin: -35px;
       margin-top: -35px;
       margin-bottom: -35px;
       width: 70px;
       height: 70px;
       filter: alpha(opacity=0);
       opacity: 0;
       -webkit-transform: scale(.7) translateZ(0);
       -webkit-transition-property: opacity,-webkit-transform;
       -webkit-transition-duration: .5s;
       transform: scale(.7) translateZ(0);
       transition-property: opacity,transform;
       transition-duration: .5s;
       cursor: pointer;
 }
</style>
  